<template>
  <div style="padding: 20px 0;">
    <div class="headers">
      <el-radio-group v-model="type" size="mini">
        <el-radio-button label="日历"></el-radio-button>
        <el-radio-button label="甘特图"></el-radio-button>
      </el-radio-group>
    </div>
    <el-calendar v-if="type === '日历'" :style="`margin-top: -52px;height:${height}px`">
      <div slot="dateCell" slot-scope="{date, data}">
        {{ date.getDate() }}
        <div :class="getclass(date)"></div>
      </div>
    </el-calendar>
    <config-table v-if="type === '甘特图'" :data="list" v-bind="config" />
  </div>
</template>

<script>
import daysHead from './numHead.vue'
import { GetDaysInMonth } from '@/utils'
import ConfigTable from '@/components/jsx/Table'
export default {
  components: {
    daysHead,
    ConfigTable
  },
  data() {
    return {
      type: '日历',
      height: window.innerHeight - 150,
      list: [
        { name: '项目1', start: '2025-01-01', end: '2025-01-03' },
        { name: '项目2', start: '2025-01-05', end: '2025-01-10' },
        { name: '项目c', start: '2025-01-11', end: '2025-01-18' },
        { name: '项目d', start: '2025-01-19', end: '2025-01-20' },
        { name: '项目e', start: '2025-01-21', end: '2025-01-23' },
        { name: '项目f', start: '2025-01-24', end: '2025-01-28' },
      ]
    }
  },
  computed: {
    config() {
      const num = GetDaysInMonth()
      const arr = Array(num).fill(0)
      return {
        // border: true,
        columns: [
          {
            width: 180,
            prop: 'name',
            align: 'center',
            fixed: 'left',
            label: '项目名称',
          },
          {
            width: (50 * num) + 10,
            header(h) {
              return <daysHead days={num} />
            },
            render(h, { row }) {
              return <daysHead days={num} data={row} />
            }
          }
        ]
      }
    }
  },
  methods: {
    getclass(date) {
      if (!date) return ''
      var ss = ''
      const c = date.getTime()
      for (let i = 0; i < this.list.length; i++) {
        const item = this.list[i];
        const a = new Date(item.start).getTime()
        const b = new Date(item.end).getTime()
        if (a < c && b > c) {
          ss = 'line'
          continue
        }
        if (a === c) {
          ss = 'line start'
          continue
        }
        if (b === c) {
          ss = 'line end'
          continue
        }
      }
      return ss
    }
  }
}
</script>

<style lang="scss" scoped>
.headers {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  justify-content: center;
}

.line {
  height: 20px;
  margin-left: -8px;
  margin-right: -9px;
  background: rgba(49, 90, 238, 0.1);

  &.start {
    margin-left: 0px;
    border-left: 5px solid rgb(49, 90, 238);
  }

  &.end {
    margin-right: 0px;
  }
}
</style>
